<template>
  <div class="dashboard-footer">
    <div v-for="item in 4" class="dashboard-circular"></div>
    <div class="dashboard-meau">
      <div v-for="(item,index) in meauList" class="dashboard-meau-radio">
        <div class="icon" :class="item.iconDefault" @click="changeState(item,index)"></div>
        <div class="content" v-show="item.checked">
          <div class="title">{{item.title}}</div>
          <div class="subtitle">{{item.subtitle}}</div>
        </div>
      </div>
    </div>
    <div class="toolbar">
      <div class="icon-content"></div>
      <div class="icon icon-sphere"></div>
      <div class="icon icon-home"></div>
      <div class="icon icon-setting"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Footer',
    props: [''],
    data() {
      return {
        meauList: [{
            iconDefault: 'icon-overall-checked',
            icon: 'icon-overall',
            iconChecked: 'icon-overall-checked',
            title: '智慧总览',
            subtitle: 'Smart Overview',
            checked: true,
            routeName: 'overall'
          },
          {
            iconDefault: 'icon-ecology',
            icon: 'icon-ecology',
            iconChecked: 'icon-ecology-checked',
            title: '智慧生态',
            subtitle: 'Smart Ecology',
            checked: false,
            routeName: 'ecology'
          }, {
            iconDefault: 'icon-construction',
            icon: 'icon-construction',
            iconChecked: 'icon-construction-checked',
            title: '智慧建造',
            subtitle: 'Smart Construction',
            checked: false,
            routeName: 'construction'
          }, {
            iconDefault: 'icon-landscape',
            icon: 'icon-landscape',
            iconChecked: 'icon-landscape-checked',
            title: '智慧风景',
            subtitle: 'Smart Sightseeing',
            checked: false,
            routeName: 'landscape'
          }, {
            iconDefault: 'icon-management',
            icon: 'icon-management',
            iconChecked: 'icon-management-checked',
            title: '智慧管理',
            subtitle: 'Smart Management',
            checked: false,
            routeName: 'management'
          }
        ]
      };
    },

    components: {},

    computed: {},

    beforeMount() {},

    mounted() {},

    methods: {
      changeArrow() {
        if (this.iconArrowStyle === 'bg-icon-arrow-down') {
          this.iconArrowStyle = 'bg-icon-arrow-up';
        } else {
          this.iconArrowStyle = 'bg-icon-arrow-down';
        }
      },
      handleSwitch(val) {

      },
      changeState(item, index) {
        console.log(this.meauList, '菜单栏')
        // item.checked = !item.checked
        this.meauList.forEach((v, i) => {
          if (index === i) {
            v.checked = true;
            v.iconDefault = v.iconChecked;
          } else {
            v.checked = false;
            v.iconDefault = v.icon;
          }
        })
        this.$router.push({
          name: item.routeName
        })
      }
    },

    watch: {}

  }
</script>
<style lang='' scoped>

</style>